<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.thymeleaf.org/extras/dialect"
	  layout:decorate="layout/layout_info"
>
<head>
	<title>修改手机号</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../static/asset/css/form.min.css" th:href="@{/asset/css/form.min.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/common/front.css" th:href="@{/asset/css/common/front.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/front/user-center.css"
		  th:href="@{/asset/css/front/user-center.css}"/>

	<style>
		.ext {
			width: 120px;
			text-align: center;
			justify-content: center;
		}
	</style>
</head>
<body>
<div layout:fragment="content" th:remove="tag">
	<div class="container-fluid display-flex p-0" style="flex: 1 1;">
		<div class="row no-gutters w-100">
			<div class="col-12 col-md-2" th:insert="layout/menus::submenu(${menus},0,'Front_Base_Info')"
				 style="background: #3c3c3c;">
			</div>

			<div class="col-12 col-md-10">
				<div class="row no-gutters">
					<div class="col-md-12">

						<div class="card">
							<div class="card-header">
								修改手机号
							</div>
							<div class="card-body">
								<form action="#" th:action="@{/contact/mobile}" method="post" th:object="${model}"
									  class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
									<div class="form-group">
										<div class="input-group">
											<input id="mobile" name="mobile" type="text"
												   class="form-control form-control-lg" placeholder="原手机号码"
												   th:field="*{mobile}"
												   required data-msg-required="不能为空">
											<input type="button" data-name="mobile" id="btnSendCode"
												   class="btn btn-primary input-group-addon ext btn-send"
												   disabled="disabled"
												   th:link="@{/contact/mobile/change}"
												   value="发送验证码">
										</div>
										<div class="form-control-feedback text-danger" th:errors="*{mobile}"></div>
										<small class="form-text text-muted">请输入原手机号码</small>
									</div>

									<div class="form-group">
										<div class="input-group">
											<input id="mobileCode" name="mobileCode" type="text"
												   class="form-control form-control-lg" placeholder="原手机验证码"
												   th:field="*{mobileCode}"
												   required data-msg-required="不能为空">
											<!--											<input type="submit" class="btn input-group-addon btn-primary ext" value="立即验证">-->
										</div>
										<div class="form-control-feedback text-danger" th:errors="*{mobileCode}"></div>
										<small class="form-text text-muted">请输入验证码</small>
									</div>

									<div class="form-group">
										<div class="input-group">
											<input id="newMobile" name="newMobile" type="text"
												   class="form-control form-control-lg" placeholder="新手机号码"
												   th:field="*{newMobile}"
												   required data-msg-required="不能为空">
											<input type="button" data-name="newMobile" id="btnSendCode2"
												   class="btn btn-primary input-group-addon ext btn-send"
												   disabled="disabled"
												   th:link="@{/contact/mobile/change2}"
												   value="发送验证码">
										</div>
										<div class="form-control-feedback text-danger" th:errors="*{mobile}"></div>
										<small class="form-text text-muted">请输入新手机号码</small>
									</div>

									<div class="form-group">
										<div class="input-group">
											<input id="newMobileCode" name="newMobileCode" type="text"
												   class="form-control form-control-lg" placeholder="新手机验证码"
												   th:field="*{newMobileCode}"
												   required data-msg-required="不能为空">
											<!--											<input type="submit" class="btn input-group-addon btn-primary ext" value="立即验证">-->
										</div>
										<div class="form-control-feedback text-danger"
											 th:errors="*{newMobileCode}"></div>
										<small class="form-text text-muted">请输入验证码</small>
									</div>

									<div class="row">
										<div class="offset-md-3 col-md-4 col-12">
											<button type="submit" class="btn btn-primary btn-block">提交修改</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<th:block layout:fragment="script">
	<script type="text/javascript" src="../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

	<script type="text/javascript" th:inline="javascript">
		/*<![CDATA[*/
		var sendCodeUrl = /*[[@{/contact/mobile/change}]]*/ './code';
		var sendNewCodeUrl = /*[[@{/contact/mobile/change2}]]*/ './code';
		var sendInterval = 60;
		/*]]>*/
		$(function () {
			var timeoutHandle;
			var intervalHandle;

			$('form').validate({
				errorElement: 'div',
				errorClass: 'form-control-feedback text-danger'
			});

			$('#mobile, #newMobile').on('input', function (e) {
				e.preventDefault();
				var val = $(this).val();
				var sendBtn = $(this).siblings('.btn-send');
				if (disabledTimeForInterval(sendBtn, sendInterval) <= 0) {
					if (val.length === 11 && /^1\d{10}$/.test(val)) {
						sendBtn.removeAttr('disabled');
					} else {
						sendBtn.attr('disabled', 'disabled');
					}
				}
			});

			$('.btn-send').on('click', function () {
				var that = $(this);
				var mobile = that.prev('input.form-control').val();
				sendCode(that, mobile, function (result) {
					if (result.success) {
						App.notifyCenter(result.message);
						disableBtn(that, sendInterval);
					} else {
						App.alert(result.message);
					}
				});
			});

			disableBtn($('.btn-send'), sendInterval, true);
		});

		function disabledTimeForInterval($ele, seconds) {
			var name = $ele.attr('data-name'), span;
			var validTime = Date.now() - 1000 * seconds;
			var svt = parseInt(localStorage.getItem('st' + name));

			if (!isNaN(svt) && (span = svt - validTime) > 0) {
				return span / 1000;
			}

			return 0;
		}

		function disableBtn($ele, seconds, init) {
			$ele.each(function () {
				var span = disabledTimeForInterval($(this), seconds);
				if (span > 0) {
					disabledTimeCountdown($(this), span);
					return;
				}
				if (init) {
					return;
				}
				localStorage.setItem('st' + name, Date.now().toString());
				disabledTimeCountdown($(this), seconds);
			});
		}

		function disabledTimeCountdown($ele, seconds) {
			$ele.attr('disabled', 'disabled');
			var text = $ele.val();
			var intervalHandle = setInterval(function () {
				seconds--;
				if (seconds <= 0) {
					clearInterval(intervalHandle);
					$ele.removeAttr('disabled');
					$ele.val(text);
				}
				$ele.val(text + '(' + seconds.toFixed(0) + ')');
			}, 1000);
		}

		function sendCode($ele, mobile, handle) {
			var link = $ele.attr('link');
			$.ajax({
				type: 'POST',
				url: link + "/" + mobile,
				success: function (result) {
					handle && handle(result);
				}
			});
		}

		function delay() {
			var curCount = maxCount;
			var val = $('#btnSendCode').val();
			var infoArr = val.split("(");
			if (infoArr.length > 1) {
				curCount = parseInt(infoArr[1].replace(")", ""));
				curCount--;
			}
			if (curCount > 0) {
				$('#btnSendCode').val(infoArr[0] + "(" + curCount + ")");
			} else {
				$('#btnSendCode').val(infoArr[0]);
				$('#btnSendCode').removeAttr('disabled');
				if (!mobileReadOnly) {
					$('#mobile').removeAttr('readonly');
				}
				clearInterval(intervalHandle);
			}
		}
	</script>
</th:block>
</body>
</html>
